// Core: Layout
// ============================================================================

// Vendor
// ----------------------------------------------------------------------------

// Variables
// ----------------------------------------------------------------------------

// Z-index scale
// -------------
$zindex-modal-backdrop: 5; // Backdrop of a modal dialog or form
$zindex-modal-content: 6;  // Content of a modal dialog or form
$zindex-dropdown-menu: 10;
$zindex-tooltip: 20;

// Mobile device size breakpoints
// ------------------------------
// See the CSS width/height values at http://mydevice.io/devices/

$max-phone-width: 500px;
$tablet-width: 768px;
$touch-target-size: 44px;

// Misc
// ----
$search-results-max-width: 950px;
$search-results-margin-right: 30px;
$search-result-sidebar-width: 285px;

$content-max-width: $search-results-max-width + $search-results-margin-right + $search-result-sidebar-width;

$content-padding-left: 30px;
$content-padding-right: 60px;
$content-padding-left-on-small-screens: 10px;
$content-padding-right-on-small-screens: 10px;

// Mixins
// ----------------------------------------------------------------------------

@mixin breakpoint($min) {
  @media only screen and (min-width: $min) {
    @content;
  }
}

// Mixin for styling elements to make them more finger-friendly on touch-input
// devices.
//
// Use interaction media queries where available (see
// http://caniuse.com/#feat=css-media-interaction) or fall back to relying on a
// JS-added class on the <html> or <body> elements otherwise.
@mixin touch-input {
  @media (pointer: coarse) {
    @content;
  }
  .env-touch {
    @content;
  }
}

// Rules
// ----------------------------------------------------------------------------

// 1. Fixes for https://github.com/hypothesis/h/issues/4236
// --------------------------------------------------------

html {
  display: flex; // 1
}

body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 100vh; // 1
  width: 100vw; // 1
}

main {
  flex-grow: 1; // 1
}
